<template>
 <div class="outbound">
   <div class="card-search">
    <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
      <el-form-item label="设备类型">
        <el-select clearable v-model="form.stockDeviceTypeId" placeholder="请选择设备类型">
            <el-option v-for="(item, index) in stockDeviceTypes" :key="index" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商">
        <el-select clearable v-model="form.supplierId" placeholder="请选择设备类型">
            <el-option v-for="(item, index) in suppliers" :key="index" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float:right;" label=" ">
        <el-button  icon="el-icon-search" type="primary" @click="onSubmit()">查询</el-button>
        <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
      </el-form-item>
    </el-form>
   </div>
   <div class="card-table">
      <!-- <el-button style="margin-bottom:12px;" icon="el-icon-plus" type="primary" @click="$router.push('/outboundAdd')">新增出库工单</el-button> -->
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          width="100"
          label="时间"
          align="center">
          <template slot-scope="{row}">{{row.time.slice(0,-3)}}</template>
        </el-table-column>
        <el-table-column
          label="设备类型"
          width="width"
          align="center">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.$index === editRowIndex" v-model="editRow.stockDeviceType.name" placeholder="">
              <el-option v-for="(item,index) in stockDeviceTypes" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <span v-else>{{scope.row.stockDeviceType.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="规格类型"
          width="width"
          align="center">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.$index === editRowIndex" v-model="editRow.specification.name" placeholder="">
              <el-option v-for="(item,index) in specifications" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <span v-else>{{scope.row.specification.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="供应商"
          width="width"
          align="center">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.$index === editRowIndex" v-model="editRow.supplier.name" placeholder="">
              <el-option v-for="(item,index) in suppliers" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <span v-else>{{scope.row.supplier.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="出库量"
          width="width"
          align="center">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.$index === editRowIndex" v-model="editRow.number"></el-input>
            <span v-else>{{scope.row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stockNum"
          label="剩余量"
          width="width"
          align="center">
        </el-table-column>
        <el-table-column
          prop="principal"
          label="使用人"
          width="width"
          align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="inputPeople"
          label="填表人"
          width="width">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="width"
          align="center">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.$index === editRowIndex" v-model="editRow.remark"></el-input>
            <span v-else>{{scope.row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px">
          <template slot-scope="{row,$index}">
            <div v-if="$index === editRowIndex">
              <el-button size="mini" type="primary" @click="editOne()">确定</el-button>
              <el-button size="mini" @click="editRowIndex = '';getAllData()">取消</el-button>
            </div>
            <div v-else>
              <el-button :disabled="!row.editable" @click="getEditRow(row,$index)" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button :disabled="!row.editable" style="margin-left:0;" @click="deleteOne(row)" type="text" icon="el-icon-delete">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin" v-if="total>=pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
   </div>
 </div>
</template>

<script>
// , outStockCreate, outStockUpdate, outStockDelete
import { stockDeviceTypeGet, specificationGet, supplierGet, outStockGet, outStockDelete, outStockUpdate } from '@/api/spare.js'

export default {
  name: 'outbound',
  components: {},
  data () {
    return {
      editRowIndex: '', // 选中当前行改变editrowIndex
      currentPage: 1,
      pageSize: 10,
      total: 100,
      stockDeviceTypes: [],
      specifications: [],
      suppliers: [],
      dialogVisible: false,
      form: {

      },
      tableData: [],
      editRow: { } // 要修改的当前行数据
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getAllData()
    stockDeviceTypeGet().then(res => {
      this.stockDeviceTypes = res.data.data.pageData
    })
    specificationGet().then(res => {
      this.specifications = res.data.data.pageData
    })
    supplierGet().then(res => {
      this.suppliers = res.data.data.pageData
    })
  },
  methods: {
    getAllData () {
      const params = {
        currPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.form
      }
      outStockGet(params).then(res => {
        console.log(res.data.data)
        this.total = res.data.data.total
        this.tableData = res.data.data.pageData
      })
    },
    deleteOne (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        outStockDelete(row._id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          this.getAllData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getEditRow (row, index) {
      this.editRowIndex = index
      this.editRow = row
    },
    editOne () {
      var that = this
      that.editRow.number = parseFloat(that.editRow.number)
      outStockUpdate(that.editRow).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.$message({
            message: '修改成功',
            type: 'success'
          })
          that.editRowIndex = ''
          that.getAllData()
        } else {
          that.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    onSubmit () {
      this.getAllData()
      this.$message({
        message: '查询成功',
        type: 'success'
      })
    },
    refresh () {
      this.form = {}
      this.getAllData()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getAllData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getAllData()
    }
  }
}
</script>

<style  scoped>
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
